<template>
	<view 
		:class="isJump=='N' ? 'content' : 'content contentActive'" 
		:style="{background: 'url('+currImg+')',backgroundSize: '100% 100%'}"
		@click="isJump=='Y' ? toRouter('/pages/webView/index?openid=') : toNavigateTo('/pages/home/map')"
	>
		<!-- <view v-if="isJump=='Y'" class="mainDoms"> 
			<image class="mainImgDoms" src="../../static/tips.png" mode="widthFix"></image>
			<view class="wxDoms" @click="toRouter('/pages/webView/index?openid=')">
				<view class="wxTextDoms">
					<view>截图保存，微信扫码</view>
					<view>同城上门，按摩SPA</view>
				</view>
				<view class="wxViewDoms">
					<image class="wxImgDoms" src="../../static/wx.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view v-if="isJump=='Y'" class="btnDoms">点击图片同城上门按摩</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				openid: '',
				isJump: 'N',			// 是否跳转，默认不跳转：N,Y：跳转
				currImg: ''
			}
		},
		onLoad() {
			// 获取，是否跳转
			this.getIsJump();
		},
		methods: {
			
			/**
			 * 获取用户的openId/userId-函数
			 * */
			getUserOpenId(urls) {
				// console.log('获取用户的openId/userId-函数');
				my.getAuthCode({
					scopes: 'auth_base',
					success: res => {
						const authCode = res.authCode;
						// 提示信息 
						// this.$Msg("my.getAuthCode 调用成功！"+ authCode);
						// console.log('my.getAuthCode 调用成功：', res);
						// 调用的API，给服务端，解析openId，返回给前端
						this.getOpenId(authCode, urls);
					},
					fail: err => {
						this.$Msg("my.getAuthCode 调用失败！");
						// console.log('my.getAuthCode 调用失败', err);
					}
				})
			},
			
			/**
			 * 根据 authCode 获取用户的唯一openid-函数
			 * */
			getOpenId(authCode, urls) {
				let url = this.$apiNames.ALIPAY_JSAPI_OPENID + this.getCurrAppId() +"/"+ authCode;
				// console.log("获取openid的地址: ", url); 
				this.$myhttps(url).then(res => {
					if(res.code == 200) {
						let data = JSON.parse(res.msg);
						// console.log("调用的API，给服务端，解析openId: ", data);
						this.openid = data.alipay_system_oauth_token_response.user_id;
						// 如果是，跳转
						if(urls) {
							urls += data.alipay_system_oauth_token_response.user_id;
							uni.navigateTo({
								url: urls
							})
						}
					} else {
						this.$Msg(res.msg ? res.msg : "获取openid失败，请联系管理员！");
						// console.log("调用的API，给服务端，解析openId--失败", res);
					}
				})
			},
			
			/**
			 * 跳转-其它非tab菜单
			 * */
			getIsJump(urls) {
				let path = this.$apiNames.IS_JUMP+"/"+this.getCurrAppId();
				// console.log("IS_JUMP===", path);
				this.$myhttps(path).then(res => {
					// console.log("跳转-其它非: ", res);
					if(res.code == 200) {
						let arr = res.msg.split(",");
						// 赋值
						this.isJump = arr[0];
						// 如果是可以跳转，请求openid
						if(arr[0] == "Y") {
							// 获取用户的openId/userId
							this.getUserOpenId();
							// 设置背景
							this.currImg = arr[2];
							//this.setBackgroundImg(arr[2]);
						} else {
							// 设置背景
							this.currImg = arr[1];
							//this.setBackgroundImg(arr[1]);
						}
					} else {
						this.$Msg(res.msg ? res.msg : "获取是否跳转失败，请联系管理员！");
					}
				})
			},
			
			/**
			 * 设置当前背景图片-函数
			 * */
			setBackgroundImg(url) {
				return {
					background: `url(${url})`
				}
			},
			
			/**
			 * 获取，当前AppId-函数
			 * */
			getCurrAppId() {
				return my.getAppIdSync().appId;
			},
			
			/**
			 * 跳转-其它非tab菜单
			 * */
			toNavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			
			/**
			 * 跳转-其它非tab菜单
			 * */
			toRouter(urls) {
				if(this.openid) {
					urls += this.openid;
					uni.navigateTo({
						url: urls
					})
				} else {
					this.getUserOpenId(urls);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url("../../static/defaultBg.jpg") no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100vh;
		.mainDoms {
			width: 100%;
			.mainImgDoms {
				width: 100%;
			}
			.wxDoms {
				background: #FFFFFF;
				margin: 40upx 60upx;
				padding: 40upx;
				text-align: center;
				border-radius: 20upx;
				.wxTextDoms {
					font-size: 56upx;
					font-weight: bold;
					margin-bottom: 16upx;
					text-align: center;
				}
				.wxViewDoms {
					margin: 0 auto;
					width: 70%;
					.wxImgDoms {
						width: 100%;
						
					}
				}
			}
		}
		.btnDoms {
			background: #93BD8094;
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 50upx;
			font-weight: bold;
			line-height: 110upx;
			height: 120upx;
			z-index: 2;
			text-align: center;
		}
	}
	.contentActive {
		background: url("../../static/bg.png") no-repeat;
	}
</style>
